<template>
  <el-container>
    <el-header>
      <h3 class="title">印刷报价系统</h3>
      <el-button type="info" class="btn" @click="backToLogin()">退出登录</el-button>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu class="el-menu-vertical-demo" background-color="#fff"
                 text-color="black" active-text-color="rgb(79, 165, 255)">
          <el-menu-item index="1" @click="goTo('/module')">
              <i class="el-icon-menu"></i>
              <span>报价</span>
          </el-menu-item>
          <el-menu-item index="2" @click="goTo('/user')" v-if="jud()">
            <i class="el-icon-user"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="3" @click="goTo('/met')" v-if="jud()">
            <i class="el-icon-folder-remove"></i>
            <span slot="title">材料管理</span>
          </el-menu-item>
          <el-menu-item index="4" @click="goTo('/order')">
            <i class="el-icon-document-copy"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  methods: {
    goTo (path) {
      this.$router.push(path)
    },
    jud () {
      return sessionStorage.getItem('roleType') === '1'
    },
    backToLogin () {
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
html, body{
  margin: 0;
  padding: 0;
}
.title{
  color: white;
  display: inline-block;
}
.el-header{
  background-color: rgb(84, 92, 100);

}
.el-aside{
  background-color: #fff;
  height: 795px;
  border: 0 solid #fff;
}

.el-menu{
  border: 0 solid #fff;
}

.btn{
  float: right;
  margin-top: 10px;
  margin-right: 10px;
}
</style>
